{include file="public/header"}
<link rel="stylesheet" href="/static/css/details.css">
<div class='container'>
	<div class='crumbs'>
		<a href="">首页 ></a>
		<a href="">我要租房 ></a>
		<a href="">{$info.area}租房 ></a>
		<a href="">{$info.vill}租房 ></a>
		<a href="">{$info.vill} </a>
	</div>
</div>
<div class='house-info'>
	<div class='house-imgs left'>
		<div class='house-name'>
			<h1>{$info.vill}</h1>
			<h3>{$info.desc1}</h3>
		</div>
		<div class='house-img'>
			<div class="house-img-num">
				<i class='house-img-num-first'>1</i>
				<i>/</i>
				<i class='house-img-num-end'>9</i>
			</div>
			<img class='big-img' src="" alt="">
		</div>
		<div class='house-img-nav'>
			<a class='prev' href="javascript:;"><i><</i></a>
			<div class='house-img-list'>
				<div class='house-img-lists' style='left: 0px;'><!--改变left值0 160 320 -->
					{foreach name='imgs' item='img'}
					<a class='img-item' href="javascript:;"><img class='small-img' src="/static/upload/owner/{$img}" alt=""></a>
					{/foreach}
				</div>
			</div>
			<a class='next' href="javascript:;"><i>></i></a>
		</div>
	</div>
	<div class='house-detail right'>
		<div class='house-detail-price'>
			<p class='price'>{$info.price}<span>元/月</span><i class=''></i><i class=''></i></p>
			<div class='character'>
				<span>品牌公寓</span>
				<a href=""><span>{$info.state}</span></a>
				<span>智能锁</span>
				<a href=""><span>带阳台</span></a>
			</div>
		</div>
		<div class='house-detail-top clearfix'>
			<div class='house-attr clearfix'>
				<div class='house-attr-c'>
					<a href=""><p>四室合租</p></a>
					<span>{$info.floor}/{$info.allfloor}F</span>
				</div>
				<div class='house-attr-c attr-center'>
					<p>{$info.mian}平方</p>
					<span>面积</span>
				</div>
				<div class='house-attr-c attr-right'>
					<a href=""><p>{$info.face}</p></a>
					<span>朝向</span>
				</div>
			</div>
			<div class='row clearfix'><div class='cols'><label for="">付款方式:</label><a class='bank-pay' href="">可支持分期付款</a></div></div>
			<div class='row clearfix'>
				<div class='cols' style='width:100%'>
					<label for="">小区地址:</label>
					<div class='house-addr'>
						<a href="">{$info.area}</a>-<a href="">{$info.vill}小区</a>-<a href="">{$info.vill}</a>
					</div>
				</div>
			</div>
			<div class='row clearfix'>
				<div class='cols40'><label for="">小区信息:</label><span>2103年键 | 住宅</span></div>
				<div><label for="">编号:</label><span>HZJG00168414-03</span></div>
			</div>
		</div>
		<div class='house-detail-price'>
			<div class='clearfix'>
				<img src="/static/upload/member/{$info.head}" alt="">
				<div class='person-info'>
					<p class='person-name'>{$info.uname}<span>江苏泰兴</span></p>
					<p class='person-tel'>{$info.utel}</p>
				</div>
			</div>
		</div>
	</div>
</div>
<div class='container'>
	<div class='house-describe'>
		<div class='describe-box'>
			<h5>基本信息</h5>
			<p><label for="">房屋描述 :</label><span>{$info.desc1}</span></p>
			<p><label for="">小区/周边 :</label><span>{$info.desc2}</span></p>
			<p><label for="">管家说 :</label><span>{$info.desc3}</span></p>
		</div>
		<div class='have-box'>
			<h5>配置信息</h5>
			<p>
				<ul>
					{foreach name='init' item='v' key='k' }
					<li class='left init'><img src="/static/img/{$v}" alt=""><em>{$k}</em></li>
					{/foreach}
				</ul>
			</p>
			<p id='click'><em>展开</em></p>
		</div>
		<div class='te'>
			<h5>房屋特征</h5>
			{foreach name='char' item='v'}
			<span class='etykiety'>{$v}</span>
			{/foreach}
		</div>
	</div>
	{if condition='$info.state != "整租"'}
	<div class='house-friend'>
		<div class='title'><h2 class='left'>合租房间</h2><span class='left'>（4室1厅/89平方）</span></div>
		<div class="table">
			<table>
				<tr>
					<th>房间号</th>
					<th>面积</th>
					<th>朝向</th>
					<th>状态</th>
					<th>特色</th>
					<th>租客</th>
					<th>价格</th>
				</tr>
				{foreach name='he' item='hezu'}
				<tr  {if condition="input('get.hid') == $hezu.hid"} class='ben'{/if}><!--待出租房间-->
					<td {if condition='$hezu.status == "已租"'} class='no-house'{/if}>{$hezu.num}{if condition="input('get.hid') == $hezu.hid"}<a class='msg'>本房间</a>{/if}</td>
					<td>{$hezu.mian}m<sub>2</sub></td>
					<td>{$hezu.face}</td>
					<td>{$hezu.status}</td>
					<td>{$hezu.tese}</td>
					<td>{if condition='$hezu.status == "已租"'}女90后白羊座{else}期待您的入住{/if}</td>
					<td {if condition="input('get.hid') == $hezu.hid"} class='no-data' {/if}>{if condition="input('get.hid') != $hezu.hid"}<a href="{:url('details')}?rid={:input('get.rid')}&&hid={$hezu.hid}">点击查看</a>{else}{$hezu.price}元/月{/if}{if condition='$hezu.status == "已租"'}--{/if}</td>
				</tr>
				{/foreach}
			</table>
		</div>
	</div>
	{/if}
	<div class='refer'>
		<div class="refer-header">
			<h2>推荐房源</h2><p>精选优质房源，经过严格审核，实拍房源照片，居住安全可靠</p>
			<div class='house-btns'>
				<div class='prev-btn'><a href="javascript:;"><</a></div>
				<div class='next-btn'><a href="javascript:;">></a></div>
			</div>
		</div>
		<div class='refer-content'>
			<div class="refer-lists" style='left:0'>
				{foreach name='tuijian' item='v'}
				{if condition='$v.state == "合租"'}
					{foreach name='v.hid' item='vv' key='k'}
				<a class='refer-list' href="{:url('details')}?rid={$v.rid}&&hid={$vv}">
					<div class='refer-img'><img src="/static/upload/owner/{$v.thumb}" alt=""></div>
					<div class='img-detail'>
						<p>{$vv.price}元/每月<i>{$info.vill}</i></p>
						<p>{$vv.mian}m² | {$v.floor}/{$v.allfloor}F | 4室合租 | 精装修</p>
					</div>
				</a>
					{/foreach}
				{else}
				<a class='refer-list' href="{:url('details')}?rid={$v.rid}">
					<div class='refer-img'><img src="/static/upload/owner/{$v.thumb}" alt=""></div>
					<div class='img-detail'>
						<p>{$v.price}元/每月<i>{$info.vill}</i></p>
						<p>{$v.mian}m² | {$v.floor}/{$v.allfloor}F | 整租 | 精装修</p>
					</div>
				</a>
					{/if}
				{/foreach}
				
			</div>
		</div>
	</div>
</div>
{include file='public/footer'}
<script>
	$(function(){
		var img = $('.small-img').attr('src');
		$('.big-img').attr('src',img);
		$('.house-img-lists>a:first').addClass('active');
		//获取图片总数
		var num = $('.img-item').length;
		$('.house-img-num-end').text(num);
		var next=0;//next按钮点击次数
		var prev=0;//prev按钮点击次数
		var d=0;
		//点击按钮切换图片
		$('.next').click(function(){
			//prev++;
			//图片切换
			//先记录当前显示的小图的下一个小图,方便之后删掉active后依然能找到他
			if(next < num-1){
				next++;
				var active = $('.active').next();
				var src = active.children().attr('src');
				$('.house-img>img').attr('src',src);
				$('.active').removeClass('active');
				active.addClass('active');
				//更改当前大图是哪一张小图,并且更改左移距离
				$('.img-item').each(function(k,v){
					if($(this).hasClass('active')){
						$('.house-img-num-first').text(k+1);
						$('.house-img-lists').css('left',-160*k+'px');
					}
				});
			}
		})
		$('.prev').click(function(){
			//图片切换
			//记录active所在位置
			$('.img-item').each(function(k,v){
				if($(this).hasClass('active')){
					prev = k;
				}
			})
			prev--;
			
			if(prev >= 0){
				next--;
				//先记录当前显示的小图,方便之后删掉active后依然能找到他
				var active = $('.active').prev();
				var src = active.children().attr('src');
				$('.house-img>img').attr('src',src);
				$('.active').removeClass('active');
				active.addClass('active');
				//更改当前大图是哪一张小图 
				$('.house-img-num-first').text(prev+1);
				$('.house-img-lists').css('left',-160*prev+'px');
				
			}
		});
		//点击按钮切换图片
		$('.img-item').click(function(){
			next++;
			//图片切换
			//先记录当前显示的小图的下一个小图,方便之后删掉active后依然能找到他
			//if(next <= num-1){
				var active = $('.active').next();
				var src = active.children().attr('src');
				$('.house-img>img').attr('src',src);
				$('.active').removeClass('active');
				active.addClass('active');
				//更改当前大图是哪一张小图,并且更改左移距离
				$('.house-img-num-first').text(next+1);
				$('.house-img-lists').css('left',-160*next+'px');
			//}
		})
	});
</script>
<script type="text/javascript">
	//底部推荐
	$(function(){
		//获取图片总数
		var num = $('.refer-list').length;
		var k = Math.ceil(num/3-1);
		var next=0;//next按钮点击次数
		var prev=0;//prev按钮点击次数
		//点击按钮切换图片
		$('.next-btn').click(function(){
			next++;
			//图片切换
			//if(next <= num-1){
				//更改当前大图是哪一张小图,并且更改左移距离
			$('.refer-lists').css('left',-1226*k+'px');
			//}
		})
		$('.prev-btn').click(function(){
			//图片切换
			prev = k;
			prev--;
			next--;
			//if(prev >= 0){
				//先记录当前显示的小图,方便之后删掉active后依然能找到他
				$('.refer-lists').css('left',-1226*prev+'px');
				
			//}
		});
	});
</script>
<script type="text/javascript">
	$(function(){
		for(var i=0;i<=$('.init').length;i++){
			if(i>10){
				$($('.init')[i-1]).css('display','none');
				$($('.init')[i-1]).addClass('selected');
			}
		}

		if($('.init').length > 10){
			$('#click').click(function(){
				$('.selected').slideToggle(500,function(){
		            $('#click').text('收起');
		        })
			})
		}
	})
</script>